<template>
  <div>
    i am home
    <clx-tree :treeData="treeData" />

    <j-table :page="pageData" @pageSizeChange="pageSizeChange" @pageNumChange="pageNumChange">
      <template #table>
        <el-table :data="tableData" stripe border v-loading="tableLoading">
          <el-table-column prop="oppositeName" label="客户" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodsName" label="货物名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodsSale" label="单价（元）" show-overflow-tooltip></el-table-column>
          <el-table-column prop="truckCountSum" label="车数（辆）" show-overflow-tooltip></el-table-column>
          <el-table-column prop="goodsAmountSum" label="拉运吨数（吨）" show-overflow-tooltip></el-table-column>
          <el-table-column prop="moneySum" label="采购金额（元）" show-overflow-tooltip></el-table-column>
        </el-table>
      </template>
    </j-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

  // 分页数据
  const pageData = ref({
    total: 0,
    page: 1,
    pageSize: 10,
  });
  // 表格所需的数据
  const tableData = ref([]);

const treeData = [
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 4,
        label: "Level two 1-1",
        children: [
          {
            id: 9,
            label: "Level three 1-1-1",
          },
          {
            id: 10,
            label: "Level three 1-1-2",
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: "Level one 2",
    children: [
      {
        id: 5,
        label: "Level two 2-1",
      },
      {
        id: 6,
        label: "Level two 2-2",
      },
    ],
  },
  {
    id: 3,
    label: "Level one 3",
    children: [
      {
        id: 7,
        label: "Level two 3-1",
      },
      {
        id: 8,
        label: "Level two 3-2",
      },
    ],
  },
];
// 表格所需的数据
const tableData = [
  {
    id: 1,
    title: "我是title活在风浪里我是title活在风浪里",
    status: true,
    docAuthor: "zhangshan",
    submitTime: "2020-06-06 23:58:49",
  },
  {
    id: 2,
    title: "我是title活在风浪里我是title活在风浪里",
    status: true,
    docAuthor: "zhangshan",
    submitTime: "2020-06-07 00:10:59",
  },
  {
    id: 3,
    title: "我是title活在风浪里我是title活在风浪里",
    status: true,
    docAuthor: "zhangshan",
    submitTime: "2020-06-11 08:07:26",
  },
  {
    id: 4,
    title: "我是title活在风浪里我是title活在风浪里",
    status: false,
    docAuthor: "zhangshan",
    submitTime: "2020-06-11 08:07:26",
  },
  {
    id: 5,
    title: "我是title活在风浪里我是title活在风浪里",
    status: false,
    docAuthor: "zhangshan",
    submitTime: "2020-06-11 08:07:26",
  },
  {
    id: 6,
    title: "我是title活在风浪里我是title活在风浪里",
    status: false,
    docAuthor: "zhangshan",
    submitTime: "2020-06-11 08:07:26",
  },
];

  // 分页改变事件
  const pageSizeChange = (val: number) => {
    pageData.value.page = 1;
    pageData.value.pageSize = val;
    getTableData();
  };
  // 当前页改变事件
  const pageNumChange = (val: number) => {
    pageData.value.page = val;
    getTableData();
  };
</script>

<style scoped></style>
